<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>商品详情</title>

    <link rel="stylesheet" href="layui/css/layui.css"/>
    <script type="text/javascript" src="layui/layui.js"></script>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <link rel="stylesheet" href="css/index.css"/>
    <script src="js/modernizr-custom-v2.7.1.min.js"></script>
    <link rel="stylesheet" href="css/goodsMess.css"/>

</head>

<body>

<!-- 引入头部 -->
<div>
    <iframe src="header.html" id="headerFrame" scrolling="no" style="height:140px;width: 100%;border: 0px;"></iframe>
</div>
<!--引入头部end-->

<div class="my-index-body" id="app" style="background-color: #fff;">
    <!--横向导航栏-->
    <div class="my-daohang1">
        <div class="layui-container">
            <div class="layui-row">
                <!--菜单-->
                <div class="layui-col-md9" style="height: 50px;">
                    <a href="">首页</a>
                    <a href="">优抢购</a>
                    <a href="">聚划算</a>
                    <a href="">大转盘</a>
                    <a href="">会员折扣</a>
                    <a href="">买家秀</a>
                </div>
            </div>
        </div>
    </div>
    <!--横向导航end-->

    <!--促销活动部分-->
    <div class="my-cuxiaodiv">

    </div>
    <!--促销活动部分end-->

    <!-- 商品主题  -->
    <div class="Xcontent" style="height: 480px;margin: 20px auto;">
        <ul class="Xcontent01">

            <div class="Xcontent06"><img :src="currentItem.pic"></div>
            <ol class="Xcontent08">
                <div class="Xcontent07"><img :src="currentItem.pic"></div>
                <div class="Xcontent09"><img :src="currentItem.pic"></div>
                <div class="Xcontent10"><img :src="currentItem.pic"></div>
                <div class="Xcontent11"><img :src="currentItem.pic"></div>
                <div class="Xcontent12"><img :src="currentItem.pic"></div>
            </ol>
            <ol class="Xcontent13">
                <div class="Xcontent14" style="height: 10px">
                    <a href="#">
                        <p>{{currentItem.name}}</p>
                    </a>
                </div>
                <!--
                <div class="Xcontent15"><img style="width: 80px;" :src="currentItem.pic"></div>
                -->
                <div class="Xcontent16">
                    <p>精彩尽在小米商城</p>
                </div>
                <div class="Xcontent17">
                    <p class="Xcontent18">售价</p>
                    <p class="Xcontent19">￥<span>{{currentItem.price}}</span></p>
                    <div class="Xcontent20">
                        <p class="Xcontent21">促销</p>
                        <p class="Xcontent22">领610元新年礼券，满再赠好礼</p>
                    </div>
                    <div class="Xcontent23">
                        <p class="Xcontent24">服务</p>
                        <p class="Xcontent25">30天无忧退货&nbsp;&nbsp;&nbsp;&nbsp; 48小时快速退款 &nbsp;&nbsp;&nbsp;&nbsp;
                            满88元免邮</p>
                    </div>

                </div>
                <div class="Xcontent26">
                    <p class="Xcontent27">颜色</p>
                    <div class="Xcontent28"><img :src="currentItem.pic"></div>
                    <div class="Xcontent29"><img :src="currentItem.pic"></div>
                </div>
                <div class="Xcontent30">
                    <p class="Xcontent31">数量</p>
                    <div class="Xcontent32" style="cursor:pointer"><img @click="subNumber" src="images/shangpinxiangqing/X15.png"></div>
                    <form>
                        <input class="input" :value="currentItem.buyNum" v-model="currentItem.buyNum" readonly/></form>
                    <div class="Xcontent33" style="cursor:pointer"><img @click="addNumber" src="images/shangpinxiangqing/16.png"></div>

                </div>
                <div class="Xcontent34">
                    <a :href="'buy.html?id='+currentItem.id+'&buyNum='+currentItem.buyNum" class="layui-btn layui-btn-normal">立即购买</a>
                </div>
                <div class="Xcontent35">
                    <a href="javascript:void(0);" @click="addToCart" class="layui-btn layui-btn-danger" style="color: #fff;">
                        加入购物车
                    </a>
                </div>
            </ol>
        </ul>
    </div>
    <!-- 商品主题end -->

    <!-- 产品详情 -->
    <div class="layui-container" style="top:20px;">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>产品详情</legend>
        </fieldset>
        <div class="layui-row">
            <div class="layui-col-md3" style="border: 1px solid #E5E5E5;">
                <p>在线客服：</p>
            </div>
            <div class="layui-col-md9" style="padding-left: 50px;font-size: 16px;">
                产品详情<br/>
                <img src="img/xq01.jpg"/>
                <img src="img/xq02.jpg"/>
                <img src="img/xq03.jpg"/>
            </div>
        </div>
    </div>
    <!-- 产品详情end -->

    <!--引入底部-->
    <div class="my-footer">
        <iframe src="footer.html" scrolling="no" style="border: 0px;width: 100%;height: 291px;"></iframe>
    </div>
    <!--引入底部end-->

    <!--回到顶部按钮-->
    <div id="my-backtop">
        <span class="layui-icon layui-icon-up"></span>
    </div>

</div>
<script src="js/include/libs.js"></script>
</body>

<script>
    layui.use(['element', 'carousel', 'laypage'], function () {
        var element = layui.element;
        var carousel = layui.carousel;
        var laypage = layui.laypage;

        //执行一个laypage实例
        laypage.render({
            elem: 'test1',
            count: 100,
            theme: '#FF5722'
        });

        //建造实例
        carousel.render({
            elem: '#test1',
            width: '100%' //设置容器宽度
            ,
            arrow: 'always' //始终显示箭头
            //,anim: 'updown' //切换动画方式
        });
    });

    let vm = new Vue({
        el: '#app',
        data: {

            currentItemId: getQueryVariable("id"),
            currentItem: {

            }
        },
        mounted() {
            console.log('当前商品的编号是：' + this.currentItemId);
            this.initCurrentItem();
        },
        methods: {
            initCurrentItem() {
                queryItemById(this.currentItemId).then(resp => {
                    if (resp.data.code === 200) {
                        this.currentItem = resp.data.data;
                        this.currentItem.buyNum = 1;
                        console.log("------商品详情如下-------");
                        console.log(this.currentItem);
                    }
                })
            },

            subNumber(){
                if(this.currentItem.buyNum>1){
                    this.currentItem.buyNum--;
                }

            },

            addNumber(){
                if(this.currentItem.buyNum<100){
                    this.currentItem.buyNum++;
                }
            },

            //把商品添加到购物车
            addToCart(){
                //首先检查用户是否已经登录，没有登录跳转到登录页面
                //哪个页面需要检查登录权限，引入auth.js即可
                if(sessionStorage.getItem("status.xiaomimall")){
                    let flag = JSON.parse(sessionStorage.getItem("status.xiaomimall"));
                    if(!flag){
                        window.location.href='login.html';
                    }
                }else{
                    window.location.href='login.html';
                }

                //如果已经登录，尝试从localStorage中获取保存的购物车对象。
                let loginSuccessUser =  JSON.parse(localStorage.getItem("currentLoginSuccessUserInfo"));
                let cart= {
                    goodsList:[]
                }; //购物车对象;
                if(localStorage.getItem("cart.xiaomimall_" + loginSuccessUser.uid)){
                    cart = JSON.parse(localStorage.getItem("cart.xiaomimall_" + loginSuccessUser.uid));
                }

                //把这个商品资料追加到cart.goodsList中；
                //判断goodsList中该商品是否已经存在，如果存在修改数量。
                let isExists = false;
                for(let i=0;i<cart.goodsList.length;i++){
                    let good = cart.goodsList[i];
                    if(good.id === this.currentItem.id){
                        cart.goodsList[i].buyNum += this.currentItem.buyNum;
                        isExists = true;
                        break;
                    }
                }
                if(!isExists){
                    //说明是新商品
                    cart.goodsList.push(this.currentItem);
                }

                //重新保存到localStorage中；
                localStorage.setItem("cart.xiaomimall_" + loginSuccessUser.uid,JSON.stringify(cart));

                //起一个定时器；
                setTimeout(()=>{
                    this.$message({
                        message: '添加商品到购物车成功！',
                        type: 'success'
                    })

                    //局部去刷新帧；
                    let iframe = document.getElementById("headerFrame");
                    iframe.src = iframe.src;

                },1000);
            }
        }
    })
</script>

</html>